<template>
    <div class="qy-page-learn">
      <van-tabs v-model="activeTab">
        <van-tab v-for="(item, index) in mapLearnPanes" :key="index" :title="item.name">
            <LearnCourse v-if="item.id === 1"></LearnCourse>
            <ExamList v-else-if="item.id === 2"></ExamList>
            <TrainingList v-else-if="item.id === 3"></TrainingList>
            <practiceList v-else-if="item.id == 4"></practiceList>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
import LearnCourse from '@/components/learn/Course'
import ExamList from '@/view/exam/list.vue'
import practiceList from '@/view/practice/list.vue'
import TrainingList from '@/view/training/list.vue'
import vanTabs from "@/components/vant/van-tabs/van-tabs.vue"
import vanTab from "@/components/vant/van-tab/van-tab.vue"

import {mapGetters} from "vuex";
export default {
  head: function () {
    return {
      title: '我的培训',
    }
  },
  components: {
    LearnCourse,
    ExamList,
    practiceList,
    TrainingList,
	vanTabs,
	vanTab
  },
  computed: {
    ...mapGetters({
      isOpenT: 'siteInfo/isOpenT', // 培训
      isOpenE: 'siteInfo/isOpenE', // 考试
      isOpenP: 'siteInfo/isOpenP', // 练习
    }),
    mapLearnPanes(){
      let arr = []
      arr = this.learnPanes;
      return arr
    },
  },
  data() {
    return {
      activeTab: 0,
      learnPanes: [
        { name: '课程', id: 1 }, { name: '考试', id: 2 }, { name: '培训', id: 3 }, { name: '练习', id: 4 },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  .qy-page-learn {
    height: 100%;
	padding-top: var(--status-bar-height);
    :deep(.qy-com-learn-course .list-wrap ){
      height: calc(100vh - 64px - 43px - var(--status-bar-height));
    }
   :deep(.top-wrap.active + .list-wrap) {
      height: calc(100vh - 43px - var(--status-bar-height));
    }
  }
</style>
